<template>
  <div>
    <!-- 物模型操作按钮 -->
    <div class="physical-model-button">
      <el-button size="small" icon="el-icon-upload">快速导入</el-button>
      <el-button size="small" @click="handlePhysicalModelView">物模型TSL</el-button>
    </div>

    <!-- 物模型标签页 -->
    <el-tabs v-model="physicalModelTabsActiveName">

      <!-- 属性定义 -->
      <el-tab-pane label="属性定义" name="properties">

        <!-- 属性定义卡片 -->
        <el-card>
          <!-- 卡片头信息 -->
          <div class="card-header" slot="header">
            <span>属性定义</span>
            <el-button
              icon="el-icon-plus"
              @click="handlePropertiesAdd"
              class="add-button"
              size="small"
            >添 加
            </el-button>
          </div>
          <!-- 属性列表 -->
          <properties-table/>
        </el-card>

      </el-tab-pane>

      <!-- 功能定义 -->
      <el-tab-pane label="功能定义" name="functions">

        <!-- 功能定义卡片 -->
        <el-card>
          <!-- 卡片头信息 -->
          <div class="card-header" slot="header">
            <span>功能定义</span>
            <el-button
              icon="el-icon-plus"
              @click="handleFunctionsAdd"
              class="add-button"
              size="small"
            >添 加
            </el-button>
          </div>
          <!-- 功能列表 -->
          <functions-table/>

        </el-card>

      </el-tab-pane>

      <!-- 事件定义 -->
      <el-tab-pane label="事件定义" name="events">
        <!-- 事件定义卡片 -->
        <el-card>
          <!-- 卡片头信息 -->
          <div class="card-header" slot="header">
            <span>事件定义</span>
            <el-button
              icon="el-icon-plus"
              @click="handleEventsAdd"
              class="add-button"
              size="small"
            >添 加
            </el-button>
          </div>
          <!-- 事件列表 -->
          <events-table/>

        </el-card>

      </el-tab-pane>

      <!-- 标签定义 -->
      <el-tab-pane label="标签定义" name="tags">
        <!-- 事件定义卡片 -->
        <el-card>
          <!-- 卡片头信息 -->
          <div class="card-header" slot="header">
            <span>标签定义</span>
            <el-button
              icon="el-icon-plus"
              @click="handleTagsAdd"
              class="add-button"
              size="small"
            >添 加
            </el-button>
          </div>
          <!-- 标签列表 -->
          <tags-table/>

        </el-card>
      </el-tab-pane>

    </el-tabs>

    <!-- 属性添加或修改对话框 -->
    <properties-add-edit @submit="submitProperties" ref="propertiesAddEdit"/>

    <!-- 功能添加或修改对话框 -->
    <functions-add-edit @submit="submitFunctions" ref="functionsAddEdit"/>

    <!-- 事件添加或修改对话框 -->
    <events-add-edit @submit="submitEvents" ref="eventsAddEdit"/>

    <!-- 标签添加或修改对话框 -->
    <tags-add-edit @submit="submitTags" ref="tagsAddEdit"/>

    <!-- 查看物模型对话框 -->
    <view-physical-model ref="viewPhysicalModel"/>

    <!-- 协议支持对话框 -->
    <protocol-standby @submit="submitProtocolStandby" ref="protocolStandby"/>

  </div>
</template>

<script>
import PropertiesAddEdit from '@/views/iot/product/physical-model/propertiesAddEdit'
import PropertiesTable from '@/views/iot/product/physical-model/propertiesTable'
import FunctionsTable from '@/views/iot/product/physical-model/functionsTable'
import EventsTable from '@/views/iot/product/physical-model/eventsTable'
import TagsTable from '@/views/iot/product/physical-model/tagsTable'
import FunctionsAddEdit from '@/views/iot/product/physical-model/functionsAddEdit'
import EventsAddEdit from '@/views/iot/product/physical-model/eventsAddEdit'
import TagsAddEdit from '@/views/iot/product/physical-model/tagsAddEdit'
import ViewPhysicalModel from '@/views/iot/product/physical-model/viewPhysicalModel'
import ProtocolStandby from '@/views/iot/product/physical-model/protocolStandby'
import utils from '@/utils/iot/metadata'
import { deployProduct, updateProduct, updateProtocolStandby } from '@/api/iot/product'
import { mapState } from 'vuex'

export default {
  // 物模型页签页
  name: 'PhysicalModel',

  components: {
    // 属性表格组件
    PropertiesTable,
    // 功能表格组件
    FunctionsTable,
    // 事件表格组件
    EventsTable,
    // 标签表格组件
    TagsTable,
    // 属性表单组件
    PropertiesAddEdit,
    // 功能表单组件
    FunctionsAddEdit,
    // 事件表单组件
    EventsAddEdit,
    // 标签表单组件
    TagsAddEdit,
    // 查询物模型组件
    ViewPhysicalModel,
    // 协议支持对话框
    ProtocolStandby
  },

  data() {
    return {
      // 物模型tabs，默认展示属性定义
      physicalModelTabsActiveName: 'properties'
    }
  },

  computed: {
    ...mapState({
      productData: state => state.product.productData
    })
  },

  mounted() {
    this.$store.commit('PRODUCT_PROPERTIES_ADD_EDIT', this.$refs.propertiesAddEdit)
    this.$store.commit('PRODUCT_FUNCTIONS_ADD_EDIT', this.$refs.functionsAddEdit)
    this.$store.commit('PRODUCT_EVENTS_ADD_EDIT', this.$refs.eventsAddEdit)
    this.$store.commit('PRODUCT_TAGS_ADD_EDIT', this.$refs.tagsAddEdit)
    this.$store.commit('PRODUCT_PROTOCOL_STANDBY', this.$refs.protocolStandby)
  },

  methods: {
    /** 查看物模型操作 */
    handlePhysicalModelView() {
      this.$refs.viewPhysicalModel.handleCheck(this.productData.metadata)
    },

    /** 属性添加按钮操作 */
    handlePropertiesAdd() {
      this.$refs.propertiesAddEdit.handleAdd()
    },

    /** 功能添加按钮操作 */
    handleFunctionsAdd() {
      this.$refs.functionsAddEdit.handleAdd()
    },

    /** 事件添加按钮操作 */
    handleEventsAdd() {
      this.$refs.eventsAddEdit.handleAdd()
    },

    /** 事件添加按钮操作 */
    handleTagsAdd() {
      this.$refs.tagsAddEdit.handleAdd()
    },

    /** 提交属性表单数据 */
    submitProperties(formData, callBack, publishState) {
      let metadata = JSON.parse(this.productData.metadata)
      this.submitForm(metadata, metadata.properties, formData, callBack, publishState)
    },

    /** 提交功能表单数据 */
    submitFunctions(formData, callBack, publishState) {
      let metadata = JSON.parse(this.productData.metadata)
      this.submitForm(metadata, metadata.functions, formData, callBack, publishState)
    },

    /** 提交事件表单数据 */
    submitEvents(formData, callBack, publishState) {
      let metadata = JSON.parse(this.productData.metadata)
      this.submitForm(metadata, metadata.events, formData, callBack, publishState)
    },

    /** 提交标签表单数据 */
    submitTags(formData, callBack, publishState) {
      let metadata = JSON.parse(this.productData.metadata)
      this.submitForm(metadata, metadata.tags, formData, callBack, publishState)
    },

    /** 提交表单 */
    submitForm(metadata, list, formData, callBack, publishState) {
      utils.arrayPutValue(list, formData)
      this.productData.metadata = JSON.stringify(metadata)
      // 更新数据
      updateProduct(this.productData).then(() => {
        // 更新缓存数据
        this.$store.commit('PRODUCT_DATA', { metadata: this.productData.metadata })
        if (typeof callBack === 'function') {
          callBack()
        }
        // 发布数据
        if (publishState === 1) {
          deployProduct(this.productData.id).then(() => {
            this.$store.commit('PRODUCT_DATA', { publishState: publishState })
          })
        }else {
          this.$store.commit('PRODUCT_DATA', { publishState: 0 })
        }
      })
    },

    /** 提交协议支持 */
    submitProtocolStandby(id, jsonData, callback) {

      let protocolStandby = this.productData.protocolStandby

      if (!protocolStandby) {
        protocolStandby = '{}'
      }

      let protocolStandbyObject = JSON.parse(protocolStandby)

      if (!jsonData.id) {
        delete protocolStandbyObject[id]
      }else {
        protocolStandbyObject[id] = jsonData
      }
      let protocolStandbyString = JSON.stringify(protocolStandbyObject)

      updateProtocolStandby(this.productData.id, protocolStandbyString).then(() => {
        this.$store.commit('PRODUCT_DATA', {
          protocolStandby: protocolStandbyString,
          publishState: 0
        })
        if (typeof callback === 'function') {
          callback()
        }
      })
    }

  }
}
</script>

<style lang="scss" scoped>
// 物模型操作按钮
.physical-model-button {
  float: right;
  right: 15px;
  position: absolute;
  z-index: 1000
}

// 属性卡片头
.card-header {
  margin-top: 5px;
  margin-bottom: 5px;

  // 添加操作按钮
  .add-button {
    float: right;
    top: -6px;
    position: relative
  }
}
</style>
